import React,{/*useImperativeHandle*,forwardRef,*/useContext,useRef} from 'react';
import {Button} from 'antd';


import {TodoContext} from './index';



let Header = (props)=>{
/*    useImperativeHandle(ref, () => ({
        // changeVal 就是暴露给父组件的方法
        changeVal: (newVal) => {
            console.log("666")
        }
    }));*/
    //传一个上下文
    const {dispath} = useContext(TodoContext);
    const iptRef = useRef();
    const handleOnKeyDown = (res)=>{
        if(res.key === 'Enter'){
            dispath({
                type:'Add',
                payload:res.target.value
            })
            iptRef.current.value = '';
        }
    }
    return (
        <>
            <header className={'header'}>
                <h2 className={'h2'}>我的待办事项：</h2>
                <input
                    ref={iptRef}
                    className={'input'}
                    type="text"
                    onKeyDown={handleOnKeyDown}
                />
                <Button type="primary">搜索</Button>
            </header>
        </>
    )
}
// Header = forwardRef(Header);

export default  Header;